<template>
  <el-form label-width="80px">
    <el-row :gutter="10">
      <el-col :span="6" v-for="(item,index) of selectList" :key="index">
        <el-form-item :label="item.fieldName">
          <el-select style="width:100%;" v-if="item.inputType===6" v-model="item.selectedName"
                     :placeholder="item.placeolder"
                     clearable multiple filterable remote :remote-method="getOptions(item)">
            <el-option v-for="(item1,index1) of item.options" :key="index1" :label="item1.name" :value="item1.id"/>
          </el-select>
          <el-select style="width:100%;" v-if="item.inputType===2" v-model="item.selectedName"
                     :placeholder="item.placeolder"
                     clearable filterable remote :remote-method="getOptions(item)">
            <el-option v-for="(item1,index1) of item.options" :key="index1" :label="item1.name" :value="item1.id"/>
          </el-select>
          <el-input style="width:100%;" v-if="item.inputType===1" v-model="item.selectedName"
                    :placeholder="item.placeolder" clearable/>
          <!--日期范围-->
          <el-date-picker v-if="item.inputType===8"
                          v-model="item.selectedName"
                          type="daterange"
                          range-separator="To"
                          start-placeholder="Start date"
                          end-placeholder="End date"
                          size="default"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
          />
          <!--时间范围-->
          <el-time-picker v-if="item.inputType===9"
                          v-model="item.selectedName"
                          is-range
                          range-separator="To"
                          start-placeholder="Start time"
                          end-placeholder="End time"
          />
          <!--日期-->
          <el-date-picker v-if="item.inputType===3"
                          v-model="item.selectedName"
                          type="date"
                          placeholder="Pick a day"
                          size="default"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
          />
          <!--时间-->
          <el-time-picker v-if="item.inputType===4"
                          v-model="item.selectedName"
                          arrow-control
                          placeholder="Arbitrary time"
          />
          <!--日期时间-->
          <el-date-picker v-if="item.inputType===5"
                          v-model="item.selectedName"
                          type="datetime"
                          placeholder="Select date and time"
                          value-format="YYYY-MM-DD HH:mm:ss"
          />
          <!--开关-->
          <el-switch v-if="item.inputType===7"
                     v-model="item.selectedName"
                     class="ml-2"
                     style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button plain @click="clearSearch">清除条件</el-button>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import http from "@/utils/request";
import dayjs from "dayjs";

const selectList = ref([])
const emits = defineEmits(['search'])
const props = defineProps({
  searchObject: {
    type: Object,
    default: {}
  }
})
onMounted(async () => {
  await getFiltersData()
})
watch(() => props.searchObject.model, (newQuery, oldQuery) => {
  getFiltersData()
}, {
  deep: true // 确保深度监控查询参数的变化
});
const getFiltersData = async () => {
  let res = await http.post('/queryTemplate/view', {
    id: props.searchObject.model
  })
  if (res.code === 200) {
    let filters = res.data.extData.filters;
    console.info(filters);
    filters = filters.filter(item => item.area !== 1)
    filters.forEach((item) => {


      props.searchObject.filters[item.javaName] = null
      if (item.inputType === 6) {
        item.options = []
        item.selectedName = []
      }
      if (item.inputType === 8) {
        item.selectedName = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      }
      if (item.inputType === 7) {
        item.selectedName = false
      }
      if (item.inputType === 3) {
        item.selectedName = dayjs().format('YYYY-MM-DD')
      }
      if (item.inputType === 4) {
        item.selectedName = dayjs().format('HH:mm:ss')
      }
      if (item.inputType === 5) {
        item.selectedName = dayjs().format('YYYY-MM-DD HH:mm:ss')
      }
    })

    selectList.value = filters;
  }
}
const getOptions = async (item) => {
  let res = await http.post(item.queryUrl)
  if (res.code === 200) {
    item.options = res.data
  }
}
const search = () => {
  selectList.value.forEach((item) => {
    if (item.selectedName === undefined) {
      return;
    }
    console.info(item.selectedName)
    if (item.selectedName || item.selectedName.length) {
      if (Array.isArray(item.selectedName)) {
        if (item.inputType === 8) {
          props.searchObject.filters.date1 = item.selectedName[0]
          props.searchObject.filters.date2 = item.selectedName[1]
        } else {
          if (item.selectedName.length > 0) {
            props.searchObject.filters[item.javaName] = item.selectedName.join(',')
          }
        }
      } else {
        props.searchObject.filters[item.javaName] = item.selectedName
      }
    } else {
      props.searchObject.filters[item.javaName] = null
    }
  })
  emits('search')
}
const clearSearch = () => {
  selectList.value.forEach((item) => {
    item.selectedName = []
    props.searchObject.filters[item.javaName] = null
  })
  emits('search')
}
</script>

<style scoped>
.el-col {
  margin-bottom: 10px;
}
</style>
